<template>
	<view class="body">
		<input v-model="email" type="text" class="uni-input commom-input" placeholder="输入需要绑定的邮箱"/>
		<input v-model="password" type="text" class="uni-input commom-input" placeholder="输入密码"/>
		
		<button @tap="submit" class="user-set-btn " 
			:class="{'user-set-btn-disable':disiabled}"
			:loading="loading"
		type="primary" :disabled="disiabled">确认修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				email:"",
				password:"",
				disiabled: true,
				loading:false,
			}
		},
		watch:{
			email(val){
				this.change();
			},
			password(val){
				this.change();
			},
		},
		methods: {
			//监听输入框
			change(){
				if (this.email && this.password ) {
					this.disiabled = false;
					return;
				}
				this.disiabled = true;
			},
			// 验证层
			check(){
				if(!this.email || this.email==""){
					uni.showToast({
						title: '邮箱不能为空',
						icon:"none"
					});
					return false;
				}
				
				
				// 验证邮箱格式
				let ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
				if(!ePattern.test(this.email)){
					console.log(this.email+"   "+ePattern.test(this.email));
					uni.showToast({
						title: '请输入正确邮箱格式',
						icon:"none"
					});
					return false;
				}
				
				return true;
			},
			//提交
			 submit(){
				 this.loading = true;
				 this.disiabled = true;
				 if (!this.check()) {
					 this.loading = false;
					 this.disiabled = false;
					 return;
				 }
				 uni.showToast({title: "提交服务器", mask:false, duration:1500});
				
				 setTimeout(()=>{
					 this.loading = false;
					 this.disiabled = false;
				 } ,1500);
			 }
		}
	}
</script>

<style>
@import "../../common/form.css";
</style>
